import React, { useState } from "react";
import styled from "styled-components";

interface Todo {
  id: number; //代办项id
  text: string; //代办项名称
  completed: boolean; //状态
}
interface AddTodoProps {
  a: (text: string) => void;
}
interface TodoListProps {
  todos: Array<Todo>;
  deleteItem: (id: number) => void;
  toggleItem: (id: number) => void;
}
// 新增模块
const AddTodo = function ({ a }: AddTodoProps) {
  // 定义文本
  const [text, setText] = useState("");
  // 处理提交请求
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // 阻止表单默认行为
    e.preventDefault();
    a(text); //这里调用ToDoList的a函数，在html中将a定义为b函数，即a={b},所以这里是b(text)，知识点：组件之间调用方法
    // 提交之后将表单清空
    setText("");
  };
  return (
    <div className="addBox">
      <form onSubmit={handleSubmit}>
        <input
          aria-label="新建代办"
          type="text"
          value={text}
          onChange={(e) => {
            setText(e.target.value);
          }}
        ></input>
        <button type="submit">新 建 代 办</button>
      </form>
    </div>
  );
};
// list模块
const TodoList = function ({ todos, deleteItem, toggleItem }: TodoListProps) {
  // deleteItem和toggleItem都是还要再传给子组件的方法
  return (
    <div className="TodoList">
      {/* 这里将ul和li都分开了，li的每一项都封装成TodoITem方法 */}
      <ul>
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}
            deleteItem={deleteItem}
            toggleItem={toggleItem}
          ></TodoItem>
        ))}
      </ul>
    </div>
  );
};
// 单个事项
const TodoItem = function ({ todo, toggleItem, deleteItem }: any) {
  // style：如果todo中的completed属性为true，则表示该项目做过，加上line-through属性样式，否则就是none
  return (
    <li style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
      {todo.text}
      <button onClick={() => toggleItem(todo.id)}>doing this</button>
      <button onClick={() => deleteItem(todo.id)}>删除</button>
    </li>
  );
};
// 过滤模块
const TodoFilter = function ({ setFilter }: any) {
  return (
    <div className="TodoFilter">
      {/* setFilter修改filter的值为all、completed、active */}
      <button
        onClick={() => {
          setFilter("all");
        }}
      >
        all
      </button>
      <button
        onClick={() => {
          setFilter("completed");
        }}
      >
        完成的
      </button>
      <button
        onClick={() => {
          setFilter("active");
        }}
      >
        准备做的
      </button>
    </div>
  );
};
// 主页面
export default function ToDoList() {
  const Title = styled.div`
    font-size: 20px;
    color: red;
    text-align: center;
  `;
  const ContentBox = styled.div`
    width: 100%;
    height: 100%;
    .addBox,.TodoList,.TodoFilter {
      width: 30%;
      height: 100%;
      margin: 0 auto;
    }
  `;
  const content = "这里是主页面待办事项";
  // 初始化代办事项
  const [todos, setTodos] = useState<Todo[]>([]);
  const [filter, setFilter] = useState("all"); //初始化为all
  const b = (text: string) => {
    const newTodoItem = {
      id: Date.now(),
      text,
      completed: false,
    };
    setTodos([...todos, newTodoItem]);
  };
  const getFilterTodo = () => {
    // filter初始化为all，除非按钮切换，否则一直是all
    switch (filter) {
      case "completed":
        return todos.filter((todo) => todo.completed);
      case "active":
        return todos.filter((todo) => !todo.completed);
      default:
        return todos;
    }
  };
  const deleteItem = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };
  const toggleItem = (id: number) => {
    setTodos(
      todos.map((todo) => {
        if (todo.id === id) {
          todo.completed = !todo.completed;
        }
        return todo;
      })
    );
  };
  return (
    <ContentBox>
      <Title>{content}</Title>
      <AddTodo a={b}></AddTodo>
      <TodoList
        todos={getFilterTodo()}
        deleteItem={deleteItem}
        toggleItem={toggleItem}
      ></TodoList>
      <TodoFilter setFilter={setFilter}></TodoFilter>
    </ContentBox>
  );
}
